<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/index.css">
	<title>我的游戏</title>
	<script type="text/javascript" src="js/flexible.js"></script>
</head>

<body>
	<div class="content flex-column bgf pt80" id="app" style="overflow: hidden;">
		<!-- header -->
		<header class="dheader flex-align flex-between">
			<a href="javascript:history.back(-1);" class="dheader-back iconfont iconleft"></a>
			<div class="dheader-title tc">我的游戏</div>
		</header>
		<!-- mgame-box -->
		<div class="mgame-box flex1 flex-column">
			<!-- mgame-nav -->
			<div class="mgame-nav flex-align flex-between">
				<div class="mgame-nav-li" :class="navIndex==index?'on':''" v-for="(item,index) in navList" :key="index"
					@click="navClick(item,index)">
					<span>{{item.name}}</span>
				</div>
			</div>
			<!-- mgame-swiper -->
			<div class="mgame-swiper flex1">
				<div class="swiper-wrapper">
					<div class="swiper-slide mgame-list" v-for="(tabItem,inds) in navList" :key="inds"
						@scroll="handleScroll">
						<div class="xhot-ul ">
							<!-- 1 -->
							<div class="xhot-li flex-align" v-for="(item,index) in tabItem.dataList" :key="index">
								<div class="xhot-lia"><img class="img100" src="images/img.png" alt=""></div>
								<div class="xhot-lib flex1">
									<div class="xhot-liba">
										<h4>自由之刃{{inds}}</h4>
										<span>散发迷人专属</span>
									</div>
									<div class="xhot-libb flex-align mt12 fz24 c828">
										<span>休闲</span>
										<span>•</span>
										<span>480721人在玩</span>
									</div>
									<div class="xhot-libc flex-align mt8">
										<img class="xhot-libc-a" src="images/icon4.png" alt="">
										<span class="xhot-libc-p">0.10元/币</span>
									</div>
								</div>
								<!-- 预约 -->
								<div class="tj-yy flex-column flex-center-align" v-if="inds==1">
									<!-- 已开服 -->
									<!-- <div class="tj-yy-a">西游4服</div> -->
									<!-- <div class="tj-yy-b">已开服</div> -->
									<!-- 未开服 -->
									<div class="tj-yy-a">距离西游4服开服</div>
									<div class="tj-yy-b">2天22小时42分钟</div>
								</div>
								<!-- 非预约 -->
								<div v-else class="tj-swcon-j flex-column">
									<div class="tj-swcon-ja flex-align">
										<img class="tj-swcon-jic" src="images/icon7.png"></img>
										<span class="ce97 fz24 ml10 bold">加速</span>
									</div>
									<div class="tj-swcon-ja flex-align mt10">
										<img class="tj-swcon-jic" src="images/icon6.png"></img>
										<span class="c13b fz24 ml10 bold">0.2折</span>
									</div>
								</div>
							</div>
							<!-- end -->
						</div>
						<!--  -->
						<div class="loadmore flex-center-align">
							<span class="loadmore-span" v-if="tabItem.status=='more'">上拉显示更多</span>
							<div class="flex-align" v-if="tabItem.status=='loading'">
								<span class="loader-android"></span>
								<span class="loadmore-span">正在加载...</span>
							</div>
							<span class="loadmore-text" v-if="tabItem.status=='noMore'">全部加载</span>
							<div class="loadmore-noData" v-if="tabItem.status=='noData'">
								<span class="loadmore-notxt">暂无数据</span>
							</div>
						</div>
						<!--  -->
					</div>
				</div>
			</div>
			<!--  -->
		</div>
		<!--  -->
		<!--  -->
	</div>
	<!--  -->
	<script src="js/jquery.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/vue.global.js"></script>
	<script src="js/used.js"></script>
	<script>
		const { createApp, ref, reactive, onMounted } = Vue
		createApp({
			setup() {
				onMounted(() => {
					init();
					getList('new')
				})
				//滚动
				function handleScroll(event) {
					const scrollDiv = event.target;
					// 获取滚动条的当前位置
					const scrollTop = scrollDiv.scrollTop;
					// 获取滚动容器的可视高度
					const clientHeight = scrollDiv.clientHeight;
					// 获取滚动内容的总高度
					const scrollHeight = scrollDiv.scrollHeight;
					// 判断是否滚动到底部
					if (scrollTop + clientHeight >= scrollHeight - 40) {
						console.log('已经滚动到底部');
						// 你可以在这里执行加载更多数据的操作
						getList()
					}
				}
				let swiper = ref(null);
				//顶部轮播图
				function init() {
					swiper.value = new Swiper(".mgame-swiper", {
						on: {
							slideChangeTransitionStart: function () {
								navIndex.value = this.activeIndex;
								getList('new');
							},
						},
					});
				}
				//导航+列表
				let navList = reactive([
					{
						name: '我玩过的',
						type: 1,
						dataList: [],
						page: 1,
						status: 'more'

					},
					{
						name: '我的预约',
						type: 2,
						dataList: [],
						page: 1,
						status: 'more'
					},
					{
						name: '我的收藏',
						type: 3,
						dataList: [],
						page: 1,
						status: 'more'
					},
				]);
				let navIndex = ref(0); //当前选中
				//点击导航
				function navClick(item, index) {
					if (navIndex.value != index) {
						swiper.value.slideTo(index)
					}
				}
				//获取列表
				async function getList(type = '') {
					let item = navList[navIndex.value];
					if (type == 'new') {
						item.status = 'more';
						item.page = 1;
						item.dataList = [];
					}
					//判断状态
					if (item.status != 'more') {
						return false;
					}
					item.status = 'loading';
					let params = {
						page: item.page, // 页码
						type: item.type,
					};
					// let res = await .$u.api.TransactionList(params);
					let list = [
						{
							"id": 453,
							"gamename": "龙之觉醒（云夜千年五流派）",
							"title": "不玩了",
							"prices": "6.00",
							"time": "2025-08-12 18:08",
							"devicetype": 2,
							"server": "23",
							"gid": 4511,
							"xiaohao_id": 28190,
							"gametype": 13,
							"gametype1": 6,
							"subtitle": "云夜千年五流派",
							"gamename2": "龙之觉醒",
							"total_money": 104,
							"typeword": "传奇 策略",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250724/8c752b6cdb4f8660ceca587c4df1da5b.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250812/8bf2d0aacc49c7e83d901d34f46a5c8b.jpg",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250812/8bf2d0aacc49c7e83d901d34f46a5c8b.jpg",
								"https://oss.sssgo.com/upload/cdcloud2/20250812/ec25702905995ae237bc98e136cfbcb9.jpg",
								"https://oss.sssgo.com/upload/cdcloud2/20250812/0f0742958a459ac72b577e919fbba922.jpg"
							],
							"hint": 104,
							"collect_num": 0
						},
						{
							"id": 450,
							"gamename": "苍月传说（无限爆充免费版）",
							"title": "新区灵符号",
							"prices": "100.00",
							"time": "2025-08-12 13:18",
							"devicetype": 2,
							"server": "18",
							"gid": 4590,
							"xiaohao_id": 29673,
							"gametype": 13,
							"gametype1": 22,
							"subtitle": "无限爆充免费版",
							"gamename2": "苍月传说",
							"total_money": 30,
							"typeword": "传奇 即时",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250731/3346ef5c6f7f285c461ce8cd6eb2638d.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250812/b7090cde33bce97c527d79078e95695a.jpg",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250812/b7090cde33bce97c527d79078e95695a.jpg",
								"https://oss.sssgo.com/upload/cdcloud2/20250812/a02f9e06676c1286a12855f39e83a1a8.jpg",
								"https://oss.sssgo.com/upload/cdcloud2/20250812/6ed98d5ad10adc7845aeb2756679ed60.jpg",
								"https://oss.sssgo.com/upload/cdcloud2/20250812/4c980a725697eef563fe451b89eb58bc.jpg"
							],
							"hint": 30,
							"collect_num": 0
						},
						{
							"id": 448,
							"gamename": "勇闯女儿国（0.1折西游千元买断版）",
							"title": "冠名+买断无限代金",
							"prices": "20.00",
							"time": "2025-08-09 01:12",
							"devicetype": 2,
							"server": "1",
							"gid": 4608,
							"xiaohao_id": 29580,
							"gametype": 25,
							"gametype1": 3,
							"subtitle": "0.1折西游千元买断版",
							"gamename2": "勇闯女儿国",
							"total_money": 1000,
							"typeword": "买断版 超低折扣",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250804/354be77eda68a59366291e9daec42bd8.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250809/fe71647623da02882653b03262d282c2.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250809/fe71647623da02882653b03262d282c2.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250809/92c96874f32618bd587a40226922dfa9.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250809/7d0ab867c16ea505c43cd0b89bf6d080.png"
							],
							"hint": 1000,
							"collect_num": 0
						},
						{
							"id": 435,
							"gamename": "涂色空间（0.05折三国送海量红将）",
							"title": "不玩了",
							"prices": "6.00",
							"time": "2025-08-05 15:25",
							"devicetype": 2,
							"server": "5",
							"gid": 4356,
							"xiaohao_id": 26394,
							"gametype": 9,
							"gametype1": 4,
							"subtitle": "0.05折三国送海量红将",
							"gamename2": "涂色空间",
							"total_money": 360.41,
							"typeword": "三国 角色",
							"gamepic": "http://oss.sssgo.com/data/upload/game/20250709/686e4b3544b03.gif",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250805/20d34d4eecc6c2700ea2860186ec0850.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250805/20d34d4eecc6c2700ea2860186ec0850.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250805/d76d71a53fda2c031ccf5923b18450f7.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250805/8f4516c30ea040eb970d6da42ca1a246.png"
							],
							"hint": 360.41,
							"collect_num": 2
						},
						{
							"id": 427,
							"gamename": "精灵物语（0.05折神权三国）",
							"title": "不玩了",
							"prices": "6.00",
							"time": "2025-08-01 17:45",
							"devicetype": 2,
							"server": "7",
							"gid": 3715,
							"xiaohao_id": 17918,
							"gametype": 3,
							"gametype1": 10,
							"subtitle": "0.05折神权三国",
							"gamename2": "精灵物语",
							"total_money": 103.17,
							"typeword": "超低折扣 回合",
							"gamepic": "http://oss.sssgo.com/data/upload/game/20250427/680dbd4cc573c.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250801/cf643d73c522bc786a1feb3e36d02c83.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250801/cf643d73c522bc786a1feb3e36d02c83.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250801/d64c1348c02a804d89ee999f1df25292.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250801/6c95533b1f12a9330d18cbd75d789a25.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250801/2d4d11a195b73f938c6a3616c21a7be4.png"
							],
							"hint": 103.17,
							"collect_num": 1
						},
						{
							"id": 423,
							"gamename": "灵武世界（0.05折狂返代金券）",
							"title": "没时间玩了，低价处理",
							"prices": "12.00",
							"time": "2025-07-30 17:45",
							"devicetype": 2,
							"server": "4",
							"gid": 4474,
							"xiaohao_id": 27490,
							"gametype": 3,
							"gametype1": 14,
							"subtitle": "0.05折狂返代金券",
							"gamename2": "灵武世界",
							"total_money": 1054.71,
							"typeword": "超低折扣 卡牌",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250721/03c3f540f4ed304ce69b5be5c0ad9e2c.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250730/1e6ec5922c1afab86f775b811ee8c769.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250730/1e6ec5922c1afab86f775b811ee8c769.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250730/a7c1b0186e1016a7c7caadb9704d73a4.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250730/fda9d8ecb4b67cf8faeb914b8364f8a0.png"
							],
							"hint": 1054.71,
							"collect_num": 1
						},
						{
							"id": 421,
							"gamename": "梦幻诸石官方版（0.05折速通版）",
							"title": "没时间玩了",
							"prices": "20.00",
							"time": "2025-07-30 17:41",
							"devicetype": 2,
							"server": "29",
							"gid": 4378,
							"xiaohao_id": 27626,
							"gametype": 25,
							"gametype1": 15,
							"subtitle": "0.05折速通版",
							"gamename2": "梦幻诸石官方版",
							"total_money": 1547.34,
							"typeword": "买断版 西游",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250710/d145291d3d6f163e700ddd1866868495.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250730/ef95aab504db8373c844dfdc927ac555.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250730/ef95aab504db8373c844dfdc927ac555.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250730/47856a8ca8709840cc19f09639a1b7d3.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250730/ff86c0168940323a6cc7b08c6b72b814.png"
							],
							"hint": 1547.34,
							"collect_num": 0
						},
						{
							"id": 418,
							"gamename": "无尽寒冬（归刃无限剑界）",
							"title": "不玩了",
							"prices": "6.00",
							"time": "2025-07-29 17:06",
							"devicetype": 2,
							"server": "157",
							"gid": 3993,
							"xiaohao_id": 24325,
							"gametype": 13,
							"gametype1": 22,
							"subtitle": "归刃无限剑界",
							"gamename2": "无尽寒冬",
							"total_money": 200,
							"typeword": "传奇 即时",
							"gamepic": "http://oss.sssgo.com/data/upload/game/20250529/68381aaf4961a.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250729/d84445035a272bd6af04ba1040576e86.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250729/d84445035a272bd6af04ba1040576e86.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250729/af578da33a998fb3354e0b9b41ed8975.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250729/9f494b717237c3776621b8fb42156186.png"
							],
							"hint": 200,
							"collect_num": 1
						},
						{
							"id": 414,
							"gamename": "王者霸业（代币换充透视版）",
							"title": "排名第一，充值4k+，没时间玩了，低价出",
							"prices": "100.00",
							"time": "2025-07-28 16:38",
							"devicetype": 2,
							"server": "2",
							"gid": 4406,
							"xiaohao_id": 26300,
							"gametype": 13,
							"gametype1": 4,
							"subtitle": "代币换充透视版",
							"gamename2": "王者霸业",
							"total_money": 4554,
							"typeword": "传奇 角色",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250714/736b92aa1c8283978660f006bdca2ff2.png",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250728/149820fbe5559d70bb888a82c0e81159.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250728/149820fbe5559d70bb888a82c0e81159.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/35cfdd532dfba8420c6cac8e6052bbfa.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/a6591950380b9cc459432d7e2bf9e2f6.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/829093dc23d7189b2fac21165cf737e6.png"
							],
							"hint": 4554,
							"collect_num": 0
						},
						{
							"id": 413,
							"gamename": "机械飞行师（0.1折风暴之影）",
							"title": "排行第一，充值5k+，心血号，没时间玩了",
							"prices": "120.00",
							"time": "2025-07-28 16:36",
							"devicetype": 2,
							"server": "13",
							"gid": 4153,
							"xiaohao_id": 24427,
							"gametype": 3,
							"gametype1": 14,
							"subtitle": "0.1折风暴之影",
							"gamename2": "机械飞行师",
							"total_money": 5805.4,
							"typeword": "超低折扣 卡牌",
							"gamepic": "https://oss.sssgo.com/upload/cdcloud2/20250618/92e439466a49161d24366d93adddd6cf.jpg",
							"sell": "0",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250728/680d608de5eef4a9145ce4a4346cea4f.png",
							"pic_arr": [
								"https://oss.sssgo.com/upload/cdcloud2/20250728/680d608de5eef4a9145ce4a4346cea4f.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/999636f073cf153d3b5980f65674fb77.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/4cf795e17666485e32ec3d29a9178759.png",
								"https://oss.sssgo.com/upload/cdcloud2/20250728/b73325c11d78eea947fdbfbbf84487c4.png"
							],
							"hint": 5805.4,
							"collect_num": 1
						}
					];
					item.dataList = [...item.dataList, ...list];
					item.page++;
					item.status = pageState(item.dataList.length, list.length)
				}
				return {
					navList,
					navIndex,
					navClick,
					handleScroll,
				}
			}
		}).mount('#app')
	</script>
</body>

</html>